<template>
  <div class="navigation">
    <div class="navigation-wrapper">
      <div class="navigation-title">{{title}}</div>
      <div class="navigation-content">
        <div class="navigation-swiper">
          <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide>
              <img class="swiper-img" src="http://www.gxjjw.gov.cn/data/images/uploadpic/2018/04/03/e97734a8c15402e5afdbad8d5d0f13d1.jpg">
            </swiper-slide>
            <swiper-slide>
              <img class="swiper-img" src="http://www.gxjjw.gov.cn/data/images/uploadpic/2018/04/27/video_cut_20180427_103748.jpg">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
            <div class="swiper-scrollbar"   slot="scrollbar"></div>
          </swiper>
        </div>
        <div class="navigation-show">
          <div class="navigation-ul">
            <ul>
              <li>
                <span>
                  一刻不停歇地推动作风建设向纵深发展
                  <br>
                    ——纪检监察机关整治形式主义、官僚主义问题速览
                </span>
              </li>
            </ul>
          </div>
          <div class="navigation-show-foot">
            <span>+更多</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HomeNavigation',
  data () {
    return {
      title: '首页 | 要闻 | 党规党纪 | 审查调查 | 巡视巡察 | 信息公开 | 监督曝光 | 在线访谈 | 网上展馆',
      swiperOption: {}
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .navigation
    padding 0 2rem 0 2rem
    color #fff
    .navigation-wrapper
      width 100%
      .navigation-title
        background $bgColor
        margin-bottom .02rem
        text-align center
        font-size .4rem
        font-weight bold
        padding .2rem 0
      .navigation-content
        display: flex
        justify-content space-between
        background $bgColor
        .navigation-swiper
          padding .2rem .1rem .2rem .2rem
          overflow hidden
          height 0
          width 50%
          padding-bottom 28%
          .swiper-img
            width 100%
        .navigation-show
          width 50%
          font-size .4rem
          padding .2rem .2rem .2rem .1rem
          .navigation-ul
            border-bottom-style solid
            border-bottom-width .05rem
            padding-bottom .5rem
          .navigation-show-foot
            text-align right
            font-size .3rem
            padding-top .2rem
</style>
